<template>
  <div class="task-list-item-com">
    <div class="task-user-card">
      <div class="user-portrait">
        <img v-lazy="listItem.avatarUrl" alt />
      </div>
      <div class="user-text">
        <div class="user-name">{{taskItem.nickName}}</div>
        <div class="user-signature">{{taskItem.brandName}}</div>
      </div>
    </div>
    <div class="tast-content">
      <div class="content-text" @click.stop="tapToDetail">
        <!-- subString -->
        <p class="copyText" :class="{'ellipsis': isShowfull}" v-html="subString"></p>
        <!-- <span class="content-text-detail" v-if="isShowfull" @click.stop="tapToDetail">详情</span> -->
      </div>
      <div class="content-link" v-if="taskItem.adArticleThumbnailsUrl" @click.stop="tapToDetail">
        <div class="link-pic">
          <img v-lazy="taskItem.adArticleThumbnailsUrl" alt />
        </div>
        <div class="link-text">{{taskItem.adArticleTitle}}</div>
      </div>
      <div class="content-link-img" v-if="taskItem.adImgUrl" @click.stop="tapToDetail">
        <ul class="link-image">
          <li v-for="(item, index) of subAdImgUrl" :key="'img' + index" @click="tap2Preview(index)">
            <img v-lazy="item+'?x-oss-process=image/resize,m_fill,h_188,w_188'" alt />
          </li>
        </ul>
        <div class="link-image-count" v-show="isShowImgCount">
          <img src="../assets/images/icon_home_pic.png" alt />
          <span>{{subAdImgUrlLength}}</span>
        </div>
      </div>
      <div class="content-bottom" v-show="isContentBottomShow">
        <div class="bottom-wallet">
          <div class="wallet-pic">
            <img :src="walletPic" alt />
          </div>
          <div class="wallet-text">{{walletText}}</div>
        </div>
        <button
          class="bottom-btn"
          v-addClass="btnColor"
          v-show="isBottomBtnShow"
          @click.stop="tapToCourse"
          :disabled="isDisabled || indexDisabled"
        >{{btnText}}</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import mixin from '@/utils/mixin'
import squareMoney from '@/assets/images/square_money.png'
import planWrong from '@/assets/images/plan_wrong.png'
import { ImagePreview, Lazyload } from 'vant'
import defaultImg from '@/assets/images/image_default_z.png'
import { mapActions } from 'vuex'

Vue.use(ImagePreview).use(Lazyload, {
  loading: defaultImg,
  error: defaultImg
})

export default {
  name: "taskListItem",
  mixins: [mixin],
  data () {
    return {
      inuniqueId: '',
      taskItem: {},
      btnColor: '',
      btnText: '',
      walletPic: squareMoney,
      walletText: '',
      subAdImgUrl: [],
      subAdImgUrlLength: 0,
      subString: '',
      isContentBottomShow: true,
      isBottomBtnShow: false,
      isDisabled: false,
      isShowfull: false,
      isShowImgCount: false,
    };
  },
  props: {
    /**
     * 传递过来的需要渲染的对象
     */
    listItem: {
      adArticleId: Number,
      adArticleThumbnailsUrl: String,
      adArticleTitle: String,
      adCategory: Number,
      adContent: String,
      adLaunchStatus: Number,
      adType: Number,
      avatarUrl: String,
      brandName: String,
      forwardAuditStatus: Number,
      id: Number,
      nickName: String,
      surplusForwardNum: Number
    },
    /**
     * pageName:
     *  'taskIndex': 流量主首页
     *  'taskDetail'：任务详情
     *  'myTask'：我的任务
     *  'msgState'：消息状态
     */
    pageName: String,
    /**
     * transmitState:
     *  0：没有关注管理员账号
     *  1：关注了管理员账号
     */
    transmitState: Number,
    indexDisabled: Boolean
  },
  directives: {
    addClass: {
      // 指令的定义
      update: function (el, binding) {
        if (binding.value) {
          el.classList.add(binding.value);
          // console.log(binding.value)
        } else {
          return false;
        }
      }
    }
  },
  // 使用侦听器解决父组件获取异步数据传递给子组件
  watch: {
    listItem (newVal) {
      this.taskItem = newVal
      this.getSubAdImgUrl()
      this.getSubString()
      this.changeBottomCss()
      this.getWalletText()
    }
  },
  created () {
    // this.getUniqueId()
  },
  mounted () {
    this.getProps()
    this.changeBottomCss()
    this.getSubAdImgUrl()
    this.getSubString()
    this.getWalletText()
  },

  methods: {
    ...mapActions([
      'setTaskItemString'
    ]),
    // 获取流量主用户Id
    getUniqueId () {
      if (window.localStorage.getItem('uniqueIdByInfluencer')) {
        this.inuniqueId = window.localStorage.getItem('uniqueIdByInfluencer')
      } else {
        this.inuniqueId = ""
      }
    },
    onChange (index) {
      this.index = index
    },
    // 获取任务详情步骤
    getTaskInfoByForwardId () {
      this.getUniqueId()
      this.$http.post('/flowForward/getTaskInfoByForwardId', {
        uniqueId: this.inuniqueId,
        adId: this.taskItem.id
      }).then(
        res => {
          let resData = res.data
          // vuex存下改变的数据
          this.setTaskItemString(JSON.stringify(resData))
          if ([2, 4, 5, 6].includes(resData.forwardAuditStatus)) {
            this.$router.push({
              path: '/infMine/msgState',
              query: {
                inuniqueId: this.inuniqueId,
                adId: this.taskItem.id
              }
            })
          } else {
            this.$router.push({
              path: '/infIndex/taskCourse',
              query: {
                inuniqueId: this.inuniqueId,
                adId: this.taskItem.id
              }
            })
          }
        },
        err => {
          console.log(err)
        }
      )
    },
    // 点击任务按钮,跳转到步骤页面
    tapToCourse () {
      this.$emit('acquireTask', this.taskItem.id)
    },

    // 点击跳转到任务详情页面
    tapToDetail () {
      this.$emit('tapToDetail', this.taskItem.id)
    },
    // 预览图片
    tap2Preview (preIndex) {
      if (this.pageName === 'taskDetail') {
        if (this.taskItem.adType === 1) {
          ImagePreview({
            images: this.subAdImgUrl,
            startPosition: preIndex
          })
        }
      }
    },
    // 判断底部钱包文字显示
    getWalletText () {
      // undifined 未接任务
      // 0-未提交 
      // 1-审核中 
      // 2-审核通过 
      // 3-第一次审核失败 
      // 4-第二次审核失败 
      // 5-第一次未提交任务超时 
      // 6-第二次未重新提交任务超时
      let taskStatus = this.taskItem.forwardAuditStatus
      // adType:
      // 1-领1.2元
      // 2-领0.8元
      let adType = this.taskItem.adType
      // adCategory:
      // 1-朋友圈
      // 2-微信群
      let adCategory = this.taskItem.adCategory
      let linshi = [undefined, 4, 5, 6]
      if (taskStatus === 2) {
        switch (adType) {
          case 1:
            this.walletText = '任务已经完成，1.2元奖金已存入钱包'
            break
          case 2:
            this.walletText = '任务已经完成，0.8元奖金已存入钱包'
            break
        }
      } else if (linshi.includes(taskStatus) || this.taskItem.adLaunchStatus === 2) {
        switch (adType) {
          case 1:
            switch (adCategory) {
              case 1:
                // 1-领1.2元 1-朋友圈
                this.walletText = '分享到朋友圈领1.2元'
                break
              case 2:
                // 1-领1.2元 2-微信群
                this.walletText = '分享到微信群领1.2元'
                break
            }
            break
          case 2:
            switch (adCategory) {
              case 1:
                // 2-领0.8元 1-朋友圈
                this.walletText = '分享到朋友圈领0.8元'
                break
              case 2:
                // 2-领0.8元 2-微信群
                this.walletText = '分享到微信群领0.8元'
              // break
            }
            break
        }
        // 在我的任务页面要显示原因
        if (this.pageName === 'myTask') {
          if (taskStatus === 4) {
            this.walletText = '未完成，原因：提交截图多次审核失败'
          } else if (taskStatus === 5 || taskStatus === 6) {
            this.walletText = '未完成，原因：超时未完成'
          }
        }
      } else if (taskStatus === 1) {
        this.walletText = '任务审核中，请耐心等待'
      } else if (taskStatus === 0 || taskStatus === 3) {
        this.walletText = '任务进行中，请尽快上传截图'
      }

    },
    // 截取广告文字(中英文)
    getSubString () {
      // console.log(this.pageName)
      if (this.pageName === 'taskIndex' || this.pageName === 'myTask') {
        if (this.taskItem.adContent) {
          let subAdContent = (this.taskItem.adContent).replace(/\r\n/g, ' ').replace(/\n/g, ' ').replace(/\s/g, ' ');
          this.subString = subAdContent
          this.isShowfull = true
        } else {
          return false
        }
      } else {
        if (this.taskItem.adContent) {
          this.subString = (this.taskItem.adContent).replace(/\\r\\n/g, '<br/>').replace(/\\n/g, '<br/>').replace(/\\s/g, ' ');
        } else {
          this.subString = this.taskItem.adContent;
        }
        this.isShowfull = false
      }
    },

    // 截取显示图片
    getSubAdImgUrl () {
      if (this.taskItem.adType === 1) {
        if (this.taskItem.adImgUrl) {
          let adImgUrls = this.taskItem.adImgUrl.split(',')
          this.subAdImgUrlLength = adImgUrls.length
          // console.log(adImgUrls)
          if (this.pageName === 'taskIndex' || this.pageName === 'myTask') {
            if (adImgUrls && this.subAdImgUrlLength > 3) {
              this.subAdImgUrl = adImgUrls.slice(0, 3);
              this.isShowImgCount = true
            } else {
              this.subAdImgUrl = adImgUrls
              this.isShowImgCount = false
            }
          } else {
            this.subAdImgUrl = adImgUrls
            this.isShowImgCount = false
          }
          return false
        }
      }
    },
    getProps () {
      this.taskItem = this.listItem
    },
    // 改变底部按钮样式
    changeBottomCss () {
      if (this.pageName) {
        if (this.pageName === 'msgState') {
          this.isContentBottomShow = false
        } else {
          this.isContentBottomShow = true
          if (this.pageName === 'taskDetail') {
            this.isBottomBtnShow = false
          } else {
            if (this.taskItem.forwardAuditStatus !== undefined) {
              switch (this.taskItem.forwardAuditStatus) {
                // undifined 未接任务
                // 0-未提交 
                // 1-审核中 
                // 2-审核通过 
                // 3-第一次审核失败 
                // 4-第二次审核失败 
                // 5-第一次未提交任务超时 
                // 6-第二次未重新提交任务超时
                case 0:
                  this.btnColor = "start";
                  this.isBottomBtnShow = true;
                  this.btnText = "继续任务";
                  this.walletPic = squareMoney
                  break;

                case 1:
                  this.btnColor = "underway";
                  this.isBottomBtnShow = true;
                  this.btnText = "查看任务";
                  this.walletPic = squareMoney
                  break;

                case 2:
                  this.btnColor = "";
                  this.isBottomBtnShow = false;
                  this.btnText = "";
                  this.walletPic = squareMoney
                  break;

                case 3:
                  this.btnColor = "start";
                  this.isBottomBtnShow = true;
                  this.btnText = "继续任务";
                  this.walletPic = squareMoney
                  break;

                case 4:
                case 5:
                case 6:
                  if (this.pageName === 'myTask') {
                    this.btnColor = '';
                    this.isBottomBtnShow = false;
                    this.btnText = '';
                    this.walletPic = planWrong
                  } else if (this.pageName === 'taskIndex') {
                    this.btnColor = 'finish'
                    this.isBottomBtnShow = true
                    this.btnText = '已结束'
                    this.isDisabled = true
                    this.walletPic = squareMoney
                  }
                  break;
              }
            } else {
              if (this.taskItem.adLaunchStatus === 1) {
                this.btnColor = "start";
                this.isBottomBtnShow = true;
                this.btnText = "接任务";
                this.walletPic = squareMoney
              } else {
                this.btnColor = 'finish'
                this.isBottomBtnShow = true
                this.btnText = '已结束'
                this.isDisabled = true
                this.walletPic = squareMoney
              }
            }
          }
        }
      } else {
        this.btnColor = '';
        this.isBottomBtnShow = false;
        this.btnText = '';
        this.walletPic = squareMoney
      }

    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
@import '~@/assets/css/common.scss';
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 2;
}
.task-list-item-com {
  width: 100%;
  margin-bottom: 32px;
  .task-user-card {
    display: flex;
    padding: 24px 0;
    box-sizing: border-box;
    .user-portrait {
      width: 88px;
      height: 88px;
      background: #ccc;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      img {
        // width: 88px;
        height: 88px;
        @include pic-center;
        border-radius: 8px;
      }
    }
    .user-text {
      box-sizing: border-box;
      padding-left: 16px;
      display: flex;
      flex-direction: column;
      .user-name {
        width: 582px;
        height: 48px;
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(48, 49, 51, 1);
        line-height: 48px;
        // letter-spacing: 1px;
        @include dot;
      }
      .user-signature {
        width: 582px;
        height: 40px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        line-height: 40px;
        letter-spacing: 1px;
        @include dot;
      }
    }
  }
  .tast-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .content-text {
      width: 582px;
      // max-height: 96px;
      // overflow: hidden;
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      line-height: 48px;
      margin-bottom: 24px;
      position: relative;
      p {
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // overflow: hidden;
        // word-break: break-all;
        word-wrap: break-word;
      }
      .content-text-detail {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(96, 101, 124, 1);
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    .content-link {
      width: 582px;
      height: 98px;
      background: rgba(243, 243, 245, 1);
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      margin-bottom: 32px;
      .link-pic {
        width: 78px;
        height: 78px;
        background-color: #ccc;
        img {
          width: 78px;
          height: 78px;
          // vertical-align: baseline;
          display: block !important;
          // vertical-align:
        }
      }
      .link-text {
        width: 474px;
        height: 80px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        line-height: 40px;
        padding-left: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        // @include dot;
      }
    }
    .content-link-img {
      width: 594px;
      margin-bottom: 32px;
      position: relative;
      .link-image {
        // height: 188px;
        width: 594px;
        position: relative;
        li {
          width: 188px;
          height: 188px;
          background-color: #ccc;
          text-align: center;
          overflow: hidden;
          margin-left: 10px;
          display: block;
          float: left;
          // margin
          position: relative;
          margin-bottom: 10px;
          img {
            // width: 188px;
            height: 188px;
            @include pic-center;
          }
        }
      }
      .link-image-count {
        width: 60px;
        height: 32px;
        background: rgba(15, 15, 15, 0.3);
        border-radius: 8px 0px 0px 0px;
        position: absolute;
        bottom: 10px;
        right: 0;
        @include center;
        img {
          width: 19px;
          height: 19px;
        }
        span {
          font-size: 24px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          // box-sizing: border-box;
          margin-left: 6px;
        }
      }
    }
    .content-bottom {
      height: 56px;
      width: 582px;
      position: relative;
      .bottom-wallet {
        position: relative;
        .wallet-pic {
          // display: inline-block;
          position: absolute;
          top: 10px;
          width: 28px;
          height: 32px;
          img {
            display: block;
            width: 28px;
            height: 32px;
          }
        }
        .wallet-text {
          height: 56px;
          font-size: 28px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(129, 129, 129, 1);
          line-height: 56px;
          box-sizing: border-box;
          padding-left: 34px;
          // letter-spacing: 1px;
        }
      }
      .bottom-btn {
        position: absolute;
        top: 0;
        right: 0;
        width: 128px;
        height: 56px;
        border-radius: 8px;
        &.start {
          background: rgba(255, 37, 37, 1);
        }
        &.underway {
          background: rgba(122, 95, 229, 1);
        }
        &.finish {
          background: rgba(129, 129, 129, 1);
        }
        font-size: 26px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
        box-sizing: border-box;
        // padding: 10px 30px;
      }
    }
  }
}
</style>
